<template>
       <div class="tarbar-list" @click="currentList">
                <div class="tarlist-block">
                       <slot name="icon-type"></slot>
                </div> 
                  <div :style="isActive"  class="tarlist-block">
                         <slot name="icon-txt"></slot>
                     </div>
            </div>
</template>
<script>
       export default{
              name:"TarBarItem",
              data(){
                     return {
                            // activeColor:''
                     }
              },
              props:{
                 path:{
                        type:String,
                        default:''
                 },
                 activeColorText:{
                        type:String
                 }
              },
              computed: {
                     activeColor(){
                           return this.$route.path.indexOf(this.path) !== -1
                     },
                     isActive(){
                            return  this.activeColor ? {color:this.activeColorText} : {}
                     }
              },
              mounted(){
                     console.log(this.$store.state.name)
              },
              methods: {
                     //点击切换  router  获取当前的活动router  加入color  没有的默认为“"
                     currentList(){
                           this.$router.replace(this.path);
                           this.$store.dispatch('changeName', '13123')
                            // this.$store.commit('login', 'wencehngshenwfnn')
                           console.log(this.$store)
                     }
              }
       }
</script>

<style lang="scss" scoped>
.tarbar-list{
       width:20%;
       text-align:center;
       .tarlist-block{
              height:0.55rem;
              line-height:0.4rem;
              overflow:hidden;
              img{
                     height:100%;
              }
              span{
                     font-size:0.3rem;
                     line-height:0.45rem;
                     display:block;
                     height:0.55rem;
              }
       }
}
</style>